<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta name="author" content="Drizvato"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

    <title>租房通 - 你的便捷租房专家</title>

    <!-- Custom CSS -->
    <link href="assets/css/styles.css" rel="stylesheet">

    <!-- Custom Color Option -->
    <link href="assets/css/colors.css" rel="stylesheet">

</head>

<body class="yellow-skin">
<!-- ============================================================== -->
<!-- Preloader - style you can find in spinners.css -->
<!-- ============================================================== -->
<div class="preloader" style="display: none"></div>

<!-- ============================================================== -->
<!-- Main wrapper - style you can find in pages.scss -->
<!-- ============================================================== -->
<div id="main-wrapper">

    <!-- ============================================================== -->
    <!-- Top header  -->
    <!-- ============================================================== -->
    <!-- Start Navigation -->
    <div th:replace="common/front-bar::#front-header"></div>
    <!-- End Navigation -->
    <div class="clearfix"></div>
    <!-- ============================================================== -->
    <!-- Top header  -->
    <!-- ============================================================== -->

    <!-- ============================ User Dashboard ================================== -->
    <section class="gray p-0">
        <div class="container-fluid p-0">

            <div class="row">

                <div th:replace="common/background-bar::#side-bar(currUri='my-contract')"></div>

                <div class="col-lg-9 col-md-8 col-sm-12">
                    <div class="dashboard-body">

                        <div class="dashboard-wraper" style="min-height: 800px">

                            <!-- Bookmark Property -->
                            <table class="property-table-wrap responsive-table bkmark">

                                <tbody>
                                <tr>
                                    <th><i class="fa fa-file-text"></i> 我的合同</th>
                                    <th></th>
                                </tr>

                                <!-- Item #1 -->
                                <tr th:each="contract: ${contracts}">
                                    <td class="dashboard_propert_wrapper">
                                        <div class="title">
                                            <h4>
                                                <a th:href="@{room(id=${contract.roomId})}">[[${contract.address}]]
                                                    <span th:if="${contract.status == 1}"
                                                          class="table-property-price bg-info text-white">已签订</span>
                                                    <span th:if="${contract.status == 0}"
                                                          class="table-property-price bg-info text-white">未签订</span>
                                                </a>
                                            </h4>
                                            <span> 租赁时间：[[${contract.rentalStartTime}]] - [[${contract.rentalOutTime}]]</span>
                                            <span> 房东信息：[[${contract.landlord}]]</span>
                                            <span> 租客信息： [[${contract.tenant}]]</span>
                                            <div>
                                                <span class="table-property-price">支付金额：[[${contract.price}]] 元</span>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="action">
                                        <a th:if="${contract.status == 1}"
                                           th:href="@{getContractDetail(landlord=${contract.landlord},tenant=${contract.tenant})}"
                                           class="delete"><i class="ti-face-smile"></i> 查看合同</a>
                                        <a th:if="${contract.status == 0}" class="delete"><i
                                                class="ti-layout-cta-left"></i> 去签订</a>
                                    </td>
                                </tr>
                                </tbody>
                            </table>

                        </div>

                        <div th:replace="common/background-bar::#footer"></div>
                        <!-- row -->

                    </div>
                </div>

            </div>
        </div>
    </section>
    <!-- ============================ User Dashboard End ================================== -->

    <a id="back2Top" class="top-scroll" title="Back to top" href="#"><i class="ti-arrow-up"></i></a>

</div>
<!-- ============================================================== -->
<!-- End Wrapper -->
<!-- ============================================================== -->

<!-- ============================================================== -->
<!-- All Jquery -->
<!-- ============================================================== -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/ion.rangeSlider.min.js"></script>
<script src="assets/js/select2.min.js"></script>
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<script src="assets/js/slick.js"></script>
<script src="assets/js/slider-bg.js"></script>
<script src="assets/js/lightbox.js"></script>
<script src="assets/js/imagesloaded.js"></script>
<script src="assets/js/daterangepicker.js"></script>
<script src="assets/js/custom.js"></script>
<!-- ============================================================== -->
<!-- This page plugins -->
<!-- ============================================================== -->
<script src="common/utils/reg.js"></script>
<script src="common/layer/layer.js"></script>
<script src="common/custom.js"></script>
</body>

</html>